How's Your Sense of Style?

How's Your Sense of Style?
by Merle
 
No, I'm not referring to your wardrobe here, but to cascading 
style sheets, also known as CSS. Developed by the World Wide 
Web Consortium, it allows webmasters to separate site layout 
from the design. CSS is actually a standard for controlling 
the appearance of your Web pages. It's essentially a set of 
rules that, when linked to or embedded in HTML pages, control
their appearance.

Right about now you're probably thinking "What's so great
about that?" The benefits are numerous -- two of the biggest
are:

1) Easy Site Updates: Global site updates will be simpler
when you can make all your changes in one place to update 
the entire site. It's much better than going through page
after page of HTML code. For example, say you have a site
made in Times New Roman font and your customer calls you
up and tells you he wants Verdana. Can you imagine 
scrolling through 25 pages or more looking for every
incident of the <font> tag and changing it to Verdana?
What a nightmare. With CSS you would simply specify the
font in one location and the change would be implemented 
site wide.

2) Faster Loading: Your HTML pages will load faster
due to cleaner code. All of the extraneous coding will
be in a style sheet, leaving less clutter and faster
downloading of the site.

So now that you've seen a few of the "benes" to style sheets,
let's learn more about them. Let's clarify up front that
while both Netscape and Internet Explorer both support CSS
from version 4.0 and higher, they don't exactly see eye to 
eye on CSS and interpret some style properties differently. 
You'll want to test your pages in both browsers to check and
correct any inconsistencies. 

So what can you control with CSS? Things like paragraphs <P>,
Headings <H1><H2><H3>, borders, table layouts, Fonts and font
colors, text alignment, pixel size, line height, letter spacing,
word spacing, font weights, page margins, and even background 
images; and the way they work is a big improvement over just 
plain old HTML. Are you beginning to see the possibilities and 
just how powerful this can be?

There are three ways to use CSS:

1) Inline: The CSS tags are applied to the web page itself, 
to any body element you choose. This is not the best method,
as you'll have to find each incidence in the web site in 
order to make changes in the future.

Example of this:

<Span Style="background-color: yellow">Text Here </Span>
In the example above the text would be highlighted yellow.

2) Embedded: The actual CSS code is part of the HTML page placed
between the <HEAD> tags on each page. Again, placing the tags 
inside the pages defeats the convenience of CSS and being able 
to make global site changes from one document, but some do 
like to use this method.

Example of embedded:

<HEAD>
<STYLE TYPE= "text/css">
<!-->
H2 {font-size:small}
</STYLE>
<HEAD>

3) Linked: In my opinion, the best method to use.
You place a link to the CSS between the <HEAD> </HEAD>
tags on your web pages. The link looks like this:

<Link Rel="stylesheet" Type="text/css" Href=style.css>

The style sheet is a separate text document that is saved
with a .css extension like this: style.css.

So now that you know your three options for using CSS, how 
do you write the code? Every style sheet rule starts with a 
selector followed by braces. A selector is any part of HTML 
coding like P, Font, Body, etc.

Here's what it looks like in action:

P {font-size: 12pt}

The P above is the selector and the font specification
between the braces is the property. This code says that
all paragraphs will be 12 pt font in size.

A rule can always have multiple properties. Semicolons
separate multiple properties, commas are used to 
separate multiple selectors.

Example:

P { color: black; background-color:white; font-size=12pt }

This code says you want all paragraphs black with a white
background and a 12 pt font. (Why anyone would want that is 
beyond me; it's just an example so go with it.)

You can always group more than one selector tag like this 
if you want them all to look the same.

TD,H2,H1 { color: Red; background-color:pink }

This would make all table cells, and heading 1 and 2 tags red 
with a pink background. Attractive don't you think? Again, this
is an exaggeration to prove a point (even if it is gaudy).

Selectors are not case sensitive, so "P" is the same as "p."

H2 { color: blue } this would make all heading 2 tags blue in 
color.

As you can see from these examples, CSS is not that hard to pick
up and can really give you more control over your website's 
appearance. For further information, check out some of these 
informative sites and you'll be a CSS pro in no time at all:

http://www.InternetBrothers.com/css.htm
http://www.w3schools.com/css/default.asp
http://www.freewebmastertips.com/tutorials/css
http://builder.cnet.com/webbuilding/0-7258.html?tag=dir1

There are also software programs you can download that will make
the creation of CSS so much easier:

TopStyle: http://www.bradsoft.com/topstyle/index.asp

Dutch's CSS: http://www.dutchthewiz.com/styles/

In Part 2 of our discussion of CSS, we'll discuss some fun 
things you can do with styles that will dress up your website 
and have you looking like a "Professional Webmaster" in a flash.


================================================================
Merle http://www.EzineAdAuction.com "Where some of the BEST Deals 
in Ezine Advertising are Made". Buy & Sell Ezine Ads in a live 
auction setting! Publishers sell off your excess inventory and 
Buyers pick up some Fantastic bargains. Free E-book on how to
write "glowing" ezine ads.....Download Now at:
http://www.ezineadauction.com/ebooks/greatezineads.pdf 
================================================================